<!--
 * @Author: hq
 * @Date: 2022-05-27 14:18:02
 * @LastEditors: hq
 * @LastEditTime: 2022-07-05 20:01:12
 * @Description: your project
 * @version: 1.0
-->
<template>
  <div>
    <div class="row">
      <div class="col">
        <div>商品名：</div>
        <div>{{ rowData.name }}</div>
      </div>
      <div class="col">
        <div>商品分类：</div>
        <div>{{ rowData.pt_cate_text }}</div>
      </div>
    </div>
    <div class="row">
      <div class="col">
        <div>店铺：</div>
        <div>{{ rowData.store.name }}</div>
      </div>
      <div class="col">
        <div>价格：</div>
        <div>{{ rowData.price }}</div>
      </div>
    </div>

    <div class="row">
      <div class="col">
        <div>平台分类：</div>
        <div>{{ rowData.pt_cate_text }}</div>
      </div>
      <div class="col">
        <div>平台子分类：</div>
        <div
          v-if="
            rowData.pt_cate_sub_text !== null && rowData.pt_cate_sub_text !== ''
          "
        >
          {{ rowData.pt_cate_sub_text }}
        </div>
        <div v-else>暂无</div>
      </div>
    </div>
    <div class="row">
      <!-- <div class="col">
        <div>标签：</div>
        <div>{{ rowData.tag }}</div>
      </div> -->
      <div class="col">
        <div>库存：</div>
        <div>{{ rowData.stock }}</div>
      </div>
    </div>
    <div class="row">
      <div class="col">
        <div>收藏数量：</div>
        <div>{{ rowData.collect }}</div>
      </div>
      <div class="col">
        <div>评论数量：</div>
        <div>{{ rowData.collect }}</div>
      </div>
    </div>
    <div class="row">
      <div class="col">
        <div>销量：</div>
        <div>{{ rowData.sale }}</div>
      </div>
      <div class="col">
        <div>状态：</div>
        <div>{{ rowData.status_text }}</div>
      </div>
    </div>
    <div class="row">
      <div class="col">
        <div>缩略图：</div>
        <el-image
          style="width: 100px; height: 100px"
          :src="rowData.thumb.src"
          :preview-src-list="rowData.thumbArr"
        >
        </el-image>
      </div>
      <div class="col">
        <div>轮播图：</div>
        <el-image
          style="width: 100px; height: 100px"
          v-for="(item, index) in rowData.image"
          :key="index"
          :src="item.src"
          :preview-src-list="rowData.imageArr"
        >
        </el-image>
        <!-- <div>{{ rowData.image }}</div> -->
      </div>
    </div>
    <div class="row">
      <!-- <div class="col">
        <div>商品详情：</div>
        <div>{{ rowData.description }}</div>
      </div> -->
      <div class="col">
        <div>商品简介：</div>
        <div v-if="rowData.abst !== null && rowData.abst !== ''">
          {{ rowData.abst }}
        </div>
        <div v-else>暂无</div>
      </div>
    </div>
  </div>
</template>

<script>
import { shopDetail } from "@/api/mall_management";
export default {
  props: ["rowId"],
  data() {
    return {
      rowData: [],
      url: "",
    };
  },
  methods: {
    async shopDetail() {
      const { data, err } = await shopDetail({
        pid: this.rowData.id,
      });
      if (err === 0) {
        data.thumbArr = [data.thumb.src];
        data.imageArr = data.image.map((item) => {
          return item.src;
        });
        this.rowData = data;
      }
    },
  },
  created() {
    this.rowData = this.rowId;
    this.shopDetail();
  },
};
</script>

<style lang="scss" scoped>
.row {
  display: flex;
  padding: 0 0 20px 20px;
  box-sizing: border-box;

  .col {
    width: 50%;
    display: flex;
    align-items: center;
    div:nth-child(1) {
      flex-shrink: 0;
    }
  }
}
</style>
